$(function(){
    //轮播图
    banner()
    function banner(){
        let imgs = document.querySelectorAll('.box .seboxs img');
        console.log(imgs);
        let btns = document.querySelectorAll('.cli label');
        let imgsbox = document.querySelector('.Rotation .box .seboxs');
        console.log(imgsbox)
        let num=0
        function move(i) {
            imgsbox.style.marginLeft= -100* i +'%'
        }
        let set = setInterval(auto,3000)
        function auto() {
            if(num >= imgs.length - 1) {
                num = -1
            }
            num++
            move(num)
            color(num)
        }
        function color(e) {
            for(let i = 0;i<btns.length;i++) {
                if(e == i){
                    btns[i].classList.add('active')
                }else{
                    btns[i].classList.remove('active')
                }
            }
        }
        function btn() {
            for (let i = 0;i<btns.length;i++){
                btns[i].onclick=(()=>{
                    clearInterval(set)
                    set = setInterval(auto,4000)
                    move(i)
                    color(i)
                })
            }
        }
        btn()
    }
    fetch('../../api/Main.json')
    .then(result => result.json())
    .then(data => {
        // bb(data)
        one.innerHTML = aa(data.one)
        two.innerHTML = aa(data.two)
        three.innerHTML = aa(data.three)
        four.innerHTML = aa(data.four)
    })
let one = document.querySelector('.one')
let two = document.querySelector('.two')
let three = document.querySelector('.three')
let four = document.querySelector('.four')

function aa(data) {
    return '\
            <div class="left">\
                <div class="small"></div>\
                <img src="' + data.img + '" alt="">\
            </div>\
            <div class="right">\
                <h1>'+data.title+'</h1>\
                <i><span style="display: none;">&nbsp;</span></i>\
                <ul>\
                    <li> '+ data.text1 + '</li>\
                    <li> '+ data.text2 + '</li>\
                    <li>' + data.text3 + '</li>\
                    <li>' + data.text4 + '</li>\
                    <li>' + data.text5 + '</li>\
                    <li>' + data.text6 + '</li>\
                </ul>\
            </div>\
        '
}
}) 